@charset "utf-8";
@import "init";
@import "common";
.web {
    font-size: 16px;
    font-family: "微软雅黑";
    header {
        padding: 0 r(22);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: r(17);
        height: r(123);
        .back {
            width: r(123);
            height: r(57);
            line-height: r(57);
            text-align: center;
            border: 2px solid $bg_color;
            border-radius: 15px;
            p {
                font-size: r(26);
                color: #000;
            }
        }
        .search_box2 {
            p {
                font-size: r(26);
            }
        }
        .city_box2 {
            width: r(164);
            height: r(58);
            border: 1px solid $bg_color;
            position: relative;
            form {
                width: 100%;
                height: 100%;
                select {
                    width: 100%;
                    height: 100%;
                    border: 0;
                    font-size: r(26);
                }
            }
            .triangle {
                width: 0;
                height: 0;
                border-top: r(15) solid $bg_color;
                border-left: r(15) solid transparent;
                border-right: r(15) solid transparent;
                position: absolute;
                right: 1%;
                top: 35%;
            }
        }
    }
    main {
        width: 100%;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: r(150);
        bottom: r(160);
        .main_box {
            display: flex;
            justify-content: center;
            padding: r(35) 0;
            .search_box {
                width: r(268);
                height: r(55);
                border: 1px solid $bg_color;
                border-radius: r(50);
                display: flex;
                justify-content: center;
                .form {
                    width: r(185);
                    margin-left: r(20);
                    form {
                        input {
                            width: r(195);
                            height: r(50);
                            border: 0;
                            font-size: r(24);
                            outline: none;
                            background-color: rgba(0,0,0,0);
                        }
                    }
                }
                .search_box_icon {
                    width: r(70);
                    height: r(50);
                    text-align: center;
                    padding-top: r(5);
                    padding-left: r(5);
                    i {
                        font-size: r(35);
                        color: $bg_color;
                    }
                }
            }
        }
        .main_head {
            display: flex;
            justify-content: center;
            padding-bottom: r(15);
            p {
                font-size: r(26);
            }
        }
        .main_options {
            padding: 0 r(114);
            display: flex;
            flex-wrap: wrap;
            .options_top {
                display: flex;
                justify-content: space-between;
                padding-bottom: r(10);
                flex-basis: 100%;
                .options_top_hobby {
                    width: r(123);
                    height: r(62);
                    background-color: #dcdcdc;
                    text-align: center;
                    line-height: r(62);
                    p {
                        font-size: r(20);
                        color: #a0a0a0;
                    }
                }
            }
        }
        .main_title {
            padding: r(35) r(20);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .main_title_left {
                display: flex;
                align-items: center;
                i {
                    font-size: r(54);
                    color: $bg-color;
                }
                p {
                    padding-left: r(12);
                    font-size: r(30);
                    color: #000;
                }
            }
            .main_title_right {
                a {
                    display: flex;
                    align-items: center;
                    i {
                        font-size: r(25);
                        color: $bg-color;
                    }
                    p {
                        padding-right: r(10);
                        font-size: r(30);
                        color: #000;
                    }
                }
            }
        }
        .main_hot {
            padding: 0 r(22);
            display: flex;
            justify-content: space-between;
            .main_hot_left {
               
                .left_img {
                     width: r(278);
                height: r(350);
                overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
            }
            .main_hot_right {
                .right_img_top {
                   div {
                        width: r(419);
                height: r(146);
                overflow: hidden;
                        img {
                            width: 100%;
                        }
                    }
                }
                .right_img_bottom {
                    display: flex;
                    justify-content: space-between;
                    padding-top: r(8);
                    div{
                          width: r(194);
                height: r(197);
                overflow: hidden;
                        img{
                             width: 100%;
                        }
                    }
                    div:last-child{
                          width: r(213);
                height: r(197);
                overflow: hidden;
                img{
                     width: 100%;
                }
                    }
                }
            }
        }
        .main_recommended{
            padding: 0 r(22) r(30);
            display: flex;
            justify-content: space-between;
            div{
                width: r(227);
                height: r(199);
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
        }
    }
}